<template>
  <div>
    <div>ShowInfo: {{ name }}-{{ age }}</div>
    <button @click="showInfoBtnClick">showInfoButton</button>
  </div>
</template>

<script setup>
// 定义props
const props = defineProps({
  name: {
    type: String,
    default: '默认值',
  },
  age: {
    type: Number,
    default: 0,
  },
})
// const props = defineProps({
//   name: {
//     type: String,
//     default: '默认值',
//   },
//   age: {
//     type: Number,
//     default: 0,
//   },
// })

// 绑定函数, 并且发出事件
// const emits = defineEmits(['infoBtnClick'])
// function showInfoBtnClick() {
//   emits('infoBtnClick', 'showInfo内部发生了点击')
// }
const emits = defineEmits(['infoBtnClick'])
function showInfoBtnClick() {
  emits('infoBtnClick', 'showInfo内部发生了点击')
}

// 定义foo的函数
function foo() {
  console.log('foo function')
}
defineExpose({
  foo,
})
</script>

<style scoped></style>
